<template>
  <div class="error-wrapper">
    <div class="error-wrap center-transform">
      <img class="error-img" src="./images/error.png" alt="error">
      <br>
      <div class="error-cotent">{{message}}</div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

const isDev = process.env.NODE_ENV === 'development'

export default {
  props: {
    error: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    message() {
      return this.error.statusCode === 404 ? '页面没有找到哦～' : '页面出错了哦～'
    }
  },
  mounted() {
    this.sendError()
  },
  methods: {
    sendError() {
      if (isDev) return
      const { message, statusCode } = this.error
      if (statusCode === 404) return
      const title = `幻熊科技nuxt模板项目: ${this.$route.fullPath}: ${statusCode}`
      const text = `### ${title} \n ${message} `
      axios({
        url: '/api/sendErr',
        method: 'post',
        data: {
          title,
          text
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.error-wrapper {
  background-color: #f5f5f5;
  text-align: center;
  width: 100%;
  height: 890px;
  border-bottom: 1px solid #dfdfdf;
}
.error-wrap {
  width: 100%;
  text-align: center;
}
.error-img {
  width: 160px;
  height: 160px;
}
.error-cotent {
  padding-top: 40px;
  font-size: 18px;
  font-family: 'PingFang';
  color: rgb(50, 48, 56);
  line-height: 2.167;
  text-align: center;
}
</style>
